<template>
    <div>
        <div class="steps">
            <div class="step" :class="step == 1 || step == 2 || step == 3 || step == 4 ? 'green' : ''">1</div>
            <div class="line" :class="step == 1 || step == 2 || step == 3 || step == 4 ? 'green' : ''"></div>
            <div class="step" :class="step == 2 || step == 3 || step == 4 ? 'green' : ''">2</div>
            <div class="line" :class="step == 3 || step == 4 ? 'green' : ''"></div>
            <div class="step" :class="step == 3 || step == 4 ? 'green' : ''">3</div>
            <div class="line" :class="step == 4 ? 'green' : ''"></div>
            <div class="step" :class="step == 4 ? 'green' : ''">4</div>
        </div>
        <div class="stepsText textColor">
            <div>{{ $t('账号注册') }}</div>
            <div>{{ $t('实名认证') }}</div>
            <div>{{ $t('安全绑定') }}</div>
            <div>{{ $t('去交易') }}</div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        step: {
            type: Number | String,
            default: 1
        },
    },
    components: {

    },
    data() {
        return {

        }
    },
    methods: {

    }
}
</script>

<style lang="scss" scoped>
.steps {
    display: flex;
    align-items: center;
    margin-top: 70px;
    padding-left: 20px;

    .step {
        width: 80px;
        height: 80px;
        line-height: 80px;
        text-align: center;
        font-size: 40px;
        color: #fff;

        @include themify() {
            background: themed("bg_step");
        }

        border-radius: 50%;
    }

    .line {
        width: 128px;
        height: 9px;

        @include themify() {
            background: themed("tab_background");
        }

    }

    .green {
        background: #2EBD85 !important;
    }
}

.stepsText {
    display: flex;
    padding-left: 20px;
    margin-top: 20px;

    div {
        text-align: center;
        width: 208px;

        &:nth-child(1) {
            width: 144px;
            text-align: left;
        }

        &:nth-child(4) {
            width: 144px;
            text-align: right;
        }
    }
}
</style>